<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>当当网</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.6.2-dist/css/bootstrap.min.css"/>
		<script src="bootstrap-4.6.2-dist/js/jquery-3.5.1.slim.min.js"></script>
		<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
	</head>
	<body>
		<!--导航栏-->
		<nav class="navbar navbar-expand-sm badge-danger navbar-light">
			<a class="navbar-brand" href="#"><img src="img/logo.jpg"> </a>
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="#">图书</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">电子书</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">童装童鞋</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">服装</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">食品</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="rs.html">热搜榜</a>
				</li>
			</ul>
			<form class="form-inline">
				<input class="form-control mr-sm-0" type="search" placeholder="热门图书"/>
				<button class="btn btn-danger mr-3" type="submit">搜索</button>
				<a href="dl.html" class="mr-2">登录</a>
				<a href="zc.html" class="ml-2">注册</a>
				<a href="gwc.html"><img src="img/gw1.jpg"></a>
				<a href="wd.html"><img src="img/gw2.jpg"></a>
			</form>
		</nav>
		<!--轮播图-->
		<div class="container">
			<div id="z" class="carousel silde" data-ride="carousel" data-interval="2000">
				<!--轮播图页面结构-->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="img/lb1.jpg" class="d-block w-100" alt="..." height="250px">
					</div>
					<div class="carousel-item">
						<img src="img/lb2.jpg" class="d-block w-100" alt="..." height="250px">
					</div>
					<div class="carousel-item">
						<img src="img/lb3.jpg" class="d-block w-100" alt="..." height="250px">
					</div>
					<div class="carousel-item">
						<img src="img/lb4.jpg" class="d-block w-100" alt="..." height="250px">
					</div>
				</div>
				<!--轮播图指示器-->
				<ol class="carousel-indicators">
					<li data-target="#z" data-slide-to = "0" class="active"></li>
					<li data-target="#z" data-slide-to = "1"></li>
					<li data-target="#z" data-slide-to = "2"></li>
					<li data-target="#z" data-slide-to = "3"></li>
				</ol>
				<!--查看上一张-->
				<a class="carousel-control-prev" href="#z" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon"></span>
				</a>
				<!--查看下一张-->
				<a class="carousel-control-next" href="#z" role="button" data-slide="next">
					<span class="carousel-control-next-icon"></span>
				</a>
			</div>
		</div>
		<!--页面内容1-->
		<div class="container">
			<hr class="text-danger bg-danger" />
			<h5 class="mt-3"><img src="img/biaoti1.jpg"></h5>
			<hr class="text-dark bg-dark" />
		    <!--利用栅格系统布局-->
		    <div class="row">
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a1.jpg"></a><hr><a href="#">中国军事科普绘本海</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a2.jpg"></a><hr><a href="#">生意的本质</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a3.jpg"></a><hr><a href="#">看文明：200个细节</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a4.jpg"></a><hr><a href="#">大先生</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a5.jpg"></a><hr><a href="#">新民说·韦伯传</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a6.jpg"></a><hr><a href="#">大话中国艺术史</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a11.jpg"></a><hr><a href="#">宋稗类钞</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a12.jpg"></a><hr><a href="#">史记</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a13.jpg"></a><hr><a href="#">如何阅读马克思</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a14.jpg"></a><hr><a href="#">WPS Office 应用大全</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a15.jpg"></a><hr><a href="#">中国通史</a></div>
		    	<div class="col-md-2 col-4"><a href="#"><img src="img/a16.jpg"></a><hr><a href="#">大地中国</a></div>
		    </div>
		</div>
		<!--标签式导航栏-->
		<div class="container">
			<hr class="text-dark bg-dark" />
			<h5 class="mt-3"><img src="img/22.jpg"></h5>
			<ul class="nav nav-tabs">
				<li class="nav-item">
					<a class="nav-link active" data-toggle="tab" href="#a">618精选</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#b">热门推荐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#c">独家特供</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane fade show active" id="a">
					<div class="row">
						<div class="col-md-2 col-4"><a href="#"><img src="img/b1.jpg"></a><hr><a href="#">张嘉佳十年文集限定</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b2.jpg"></a><hr><a href="#">那不勒斯四部曲</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b3.jpg"></a><hr><a href="#">茅盾文学奖自选精编</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b4.jpg"></a><hr><a href="#">欢迎来到人间</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b5.jpg"></a><hr><a href="#">精神病预后档案</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b6.jpg"></a><hr><a href="#">追诉时效倒计时</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b11.jpg"></a><hr><a href="#">无辜者的谎言</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b12.jpg"></a><hr><a href="#">短经典精选系列</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b13.jpg"></a><hr><a href="#">特殊罪案调查组</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b14.jpg"></a><hr><a href="#">燕食记</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b15.jpg"></a><hr><a href="#">紫颜色</a></div>
		    	        <div class="col-md-2 col-4"><a href="#"><img src="img/b16.jpg"></a><hr><a href="#">烟霞里</a></div>
					</div>
				</div>
				<div class="tab-pane fade" id="b">
					<div class="row">
						<div class="col-md-4 col-12"><a href="#"><img src="img/b100.jpg"></a></div>
		    	        <div class="col-md-4 col-12"><a href="#"><img src="img/b200.jpg"></a></div>
		    	        <div class="col-md-4 col-12"><a href="#"><img src="img/b300.jpg"></a></div>
		    	    </div>
				</div>
				<div class="tab-pane fade" id="c">
					<div class="row">
						<div class="col-md-3 col-6"><a href="#"><img src="img/c1.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/c2.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/c3.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/c4.jpg"></a></div>
		    	    </div>
				</div>
			</div>
			<hr class="text-dark bg-dark" />
		</div>
		<!--页面内容2-->
		<div class="container">
			<h5 class="mt-3">当当优选</h5>
			<ul class="nav nav-pills">
				<li class="nav-item">
					<a class="nav-link active" data-toggle="tab" href="#e">图书精选好店</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" data-toggle="tab" href="#f">服装</a>
				</li>
			</ul>
			<hr class="text-dark bg-dark" />
			<div class="tab-content">
				<div class="tab-pane fade show active" id="e">
					<div class="row">
						<div class="col-md-3 col-6"><a href="#"><img src="img/q1.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q2.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q3.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q4.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q5.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q6.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q7.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/q8.jpg"></a></div>
		    	    </div>
				</div>
				<div class="tab-pane fade" id="f">
					<div class="row">
						<div class="col-md-3 col-6"><a href="#"><img src="img/w1.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/w2.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/w3.jpg"></a></div>
		    	        <div class="col-md-3 col-6"><a href="#"><img src="img/w4.jpg"></a></div>
		    	    </div>
				</div>
			</div>
		</div>
		<!--页脚-->
		<hr class="text-danger bg-danger" />
		<footer class="text-center mb-3 mt-2 bg-light">
			<p class="mb-0">&copy; Copyright 2024-2028,All Rights Reserved</p>
			<p><span class="text-danger mr-3 ml-3">牛肉面不要牛肉</span>版权所有</p>
		</footer>
	</body>
</html>
